<page-header-wrapper [title]="'菜单管理'"></page-header-wrapper>

<nz-card class="search-box">
  <div nz-row nzGutter="8">
    <div nz-col [nzSpan]="6">
      <sf #sf [schema]="searchSchema" [ui]="{ '*': { spanLabelFixed: 90,grid: { span: 24 } }}" [compact]="true"
        [button]="'none'"></sf>
    </div>
    <div nz-col [nzSpan]="8" nzOffset="1">
      <button nz-button nzType="primary" [nzLoading]="service.http.loading"
        (click)="loadMemu(selectedPlatform.appId)">查询</button>
      <button nz-button (click)="resetSF()">重置</button>
      <!--  <button nz-button (click)="delMenu(0)" [nzLoading]="service.http.loading">
        清空货主菜单
      </button>
      <button nz-button (click)="delMenu(1)" [nzLoading]="service.http.loading">
        清空运营后台菜单
      </button> -->
    </div>
  </div>
</nz-card>

<nz-card class="content-box">

  <nz-tabset [nzTabBarExtraContent]="extraTemplate">
    <nz-tab nzTitle="货主菜单" (nzClick)="changeMemu(0)" *ngIf="isShowFre"></nz-tab>
    <nz-tab nzTitle="运营后台菜单" (nzClick)="changeMemu(1)" *ngIf="isShowBackEND"></nz-tab>
  </nz-tabset>
  <ng-template #extraTemplate>
    <div class="d-flex align-items-center">
      <div>
        <button nz-button nzType="primary" (click)="menuAction('新增菜单')" acl
          [acl-ability]="['MENU-INDEX-add']">新增</button>
        <button nz-button nzType="primary" (click)="menuSort()" acl [acl-ability]="['MENU-INDEX-sort']">菜单排序</button>
        <!-- <button nz-button nzType="primary" (click)="menuImport(0)" [disabled]="false"
          *ngIf="selectedPlatform.enName==='tms-smc-web'">
          导入货主菜单
        </button>
        <button nz-button nzType="primary" (click)="menuImport(1)" [disabled]="false"
          *ngIf="selectedPlatform.enName==='tms-obc-web'">
          导入运营后台菜单
        </button> -->
      </div>
    </div>
  </ng-template>

  <!-- <st #st [data]="service.$api_get_all" [columns]="columns" [expand]="expand" expandRowByClick
    [req]="{ method: 'POST',  reName: { pi: 'pageIndex', ps: 'pageSize' },params:{appId:selectedPlatform?.appId} }"
    [res]="{ reName: { list: 'data' } }" [page]="{ show: false }" [loading]="false"
    [scroll]="{ y: '370px' }" (change)="stChange($event)">
    <ng-template #expand let-item let-index="index" let-column="column">
      {{ item.description }}
    </ng-template>
  </st> -->
  <nz-table #expandTable [nzData]="listOfMapData" nzTableLayout="fixed" nzBordered nzSize="small"
    [nzLoading]="service.http.loading" *ngIf="isShowFre || isShowBackEND">
    <thead>
      <tr>
        <!-- <th nzWidth="70px" nzAlign="center">#</th> -->
        <th>菜单名称</th>
        <th>菜单编号</th>
        <th>路由地址</th>
        <th nzAlign="center" nzWidth="100px">菜单图标</th>
        <th nzAlign="center" nzWidth="100px">菜单排序</th>
        <th nzAlign="center" nzWidth="250px">操作</th>
      </tr>
    </thead>
    <tbody>
      <ng-container *ngFor="let data of expandTable.data">
        <ng-container *ngFor="let item of mapOfExpandedData[data.key];let i = index">
          <tr *ngIf="(item.parent && item.parent.expand) || !item.parent">
            <!-- <td nzWidth="70px" nzAlign="center" [nzChecked]="item.checked">{{ i+1 }}</td> -->
            <td [nzIndentSize]="item.level! * 20" [nzShowExpand]="!!item.children" [(nzExpand)]="item.expand"
              (nzExpandChange)="service.collapse(mapOfExpandedData[data.key], item, $event)">
              {{ item.title }}
            </td>
            <td>{{ item.keyCode }}</td>
            <td>{{ item.link }}</td>
            <td nzAlign="center" nzWidth="100px">
              <ng-container [ngSwitch]="item.iconType">
                <i *ngSwitchCase="'icon'" nz-icon [nzType]="item.value"></i>
                <i *ngSwitchCase="'iconfont'" [class]="item.value"></i>
              </ng-container>
            </td>
            <td nzAlign="right" nzWidth="100px">{{ item.sorted }}</td>
            <td nzAlign="center" nzWidth="250px">
              <a (click)="menuAction('查看菜单',item,item.parentId,true)">查看</a>
              <nz-divider nzType="vertical"></nz-divider>
              <a (click)="menuAction('编辑菜单',item,item.parentId)" acl [acl-ability]="['MENU-INDEX-edit']">编辑</a>
              <nz-divider nzType="vertical"></nz-divider>
              <a (click)="deleteAction(item)" acl [acl-ability]="['MENU-INDEX-delete']">删除</a>
              <ng-container *ngIf="item.level!==3">
                <nz-divider nzType="vertical"></nz-divider>
                <a (click)="menuAction('新增菜单',null,item.id)" acl [acl-ability]="['MENU-INDEX-add']">新增子项</a>
              </ng-container>
            </td>
          </tr>
        </ng-container>
      </ng-container>
    </tbody>
  </nz-table>
</nz-card>